<template>
	<fui-nav-bar :title="title" @leftClick="leftClick">
		<fui-icon name="arrowleft"></fui-icon>
		<template v-slot:right>
			<fui-button type="success" btn-size="mini" @click="publishHandler">发布</fui-button>
		</template>
	</fui-nav-bar>
	<div class="container">
		<textarea @blur="bindTextAreaBlur" :value="textareaValue" placeholder="这一刻想法..." class="textarea" />
		<view class="fui-btn__box">
			<!-- <fui-button type="gray" width="400rpx" height="84rpx" text="开始上传" bold @click="startUpload"></fui-button> -->
		</view>
		<fui-upload
			background="#333"
			addColor="#d1d1d1"
			immediate
			:url="url"
			:header="{ 'Content-Type': 'multipart/form-data' }"
			name="files"
			ref="upload"
			@success="success"
			@error="error"
			@complete="complete"
		></fui-upload>
	</div>
	<!-- <fui-button @click="addPictures">添加图片</fui-button> -->
	<!-- <fui-button class="" @click="addLocation">添加位置</fui-button> -->
	<!-- <view class="addres" @click="getAddres">
		<fui-icon name="location-fill" size="24"></fui-icon>
		<text>贵阳市云岩区中建大厦</text>
	</view> -->
</template>

<script>
import { defineComponent, reactive, toRefs } from 'vue';
import { useCounterStore, useFunctionStore } from '@/store/equipment/index.js';
import { publishCircleApi } from '@/request/modules/cricle.js';
import { showMsg } from '../utils/interact';
import { onHide, onUnload } from '@dcloudio/uni-app';
import useCircleStore from '../store/circle';
export default defineComponent({
	setup() {
		const state = reactive({
			title: '发表图文',
			textareaValue: '',
			//上传接口地址
			url: 'https://www.yuexintec.fun/yx/api/upload',
			//上传状态，用于保存或其他操作时做判断
			status: '',
			//上传的图片地址列表
			urls: [],
			upload: {}
		});
		const functionStore = useFunctionStore();
		const leftClick = () => {
			functionStore.navigateBack();
		};
		const success = (e) => {
			console.log('上传成功：' + JSON.stringify(e));
			//上传成功回调，处理服务器返回数据【此处根据实际返回数据进行处理】
			let res = JSON.parse(e.res.data.replace(/\ufeff/g, '') || '{}');
			state.status = e.status;
			if (res.image[0]) {
				//处理结果返回给组件
				//e.index为图片索引值
				state.upload.result(res.image[0], e.index);
			}
		};
		const error = (e) => {
			console.log('上传失败：' + JSON.stringify(e));
			state.status = e.status;
			showMsg(JSON.stringify(e));
		};
		const complete = (e) => {
			state.status = e.status;
			state.urls = e.urls;

			if (state.status === 'success' && e.action === 'upload') {
				showMsg('上传完成');
				//已上传完成的图片列表 this.urls
				console.log(state.urls);
			}
		};
		// 多行输入框失去焦点的回调
		const bindTextAreaBlur = (e) => {
			state.textareaValue = e.detail.value;
		};
		//点击按钮触发上传操作
		const publishHandler = async () => {
			// 文字图片至少有一样
			if (state.urls.length == 0 && state.textareaValue == '') return showMsg('请填写内容');
			// 收集userId,text,imageUrls
			const params = {
				text: state.textareaValue,
				userId: uni.getStorageSync('user_id') || '5',
				imageUrls: state.urls
			};

			const res = await publishCircleApi(params);
			if (res.statusCode !== 200) return showMsg('发布失败');
			showMsg('发布成功');
			useCircleStore().isUpdate = true;
			uni.switchTab({
				url: '/pages/circle/index'
			});
		};
		const getAddres = () => {
			console.log(111);
			uni.getLocation({
				type: 'gcj02', // 返回可以用于uni.openLocation的经纬度
				success: (res) => {
					console.log('当前位置信息：', res);
					// 处理获取位置信息成功后的逻辑
				},
				fail: (err) => {
					console.error('获取位置信息失败', err);
					// 处理获取位置信息失败后的逻辑
				}
			});
		};

		return {
			...toRefs(state),
			leftClick,
			success,
			error,
			complete,
			publishHandler,
			bindTextAreaBlur,
			getAddres
		};
	}
});
</script>

<style scoped lang="scss">
.container {
	width: 100%;
	padding: 20rpx;
	box-sizing: border-box;
	.textarea {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		font-size: 28rpx;
	}
}
.addres {
	padding: 10rpx 20rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	text {
		margin-left: 10rpx;
	}
}
</style>
